<template>
  <component :is="ct.comp.guide" />
  <div v-if="val.comp_loading == true">
    <div class="dljjc_box3_x">
      <div class="nm_mtab">
        <m-tabs
          :value="cfg.route.params?.id"
          :data="val"
          @update:value="ct.tabhand"
          :list="ct.tablist"
        />
      </div>
      <template v-if="ct.comp[cfg.route.params.id] != null">
        <component
          :is="ct.comp[cfg.route.params.id]"
          @update_load="ct.load"
          :load="val.comp_loading"
          :tjval="val"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
import guide from "./set.vue";

export default {
  setup() {
    const ct = {
      tabhand: (routename) => {
        cfg.router.push({
          path: `/gt/am-${routename}`,
        });
      },
      comp: {
        role: defineAsyncComponent(() => import(`./comp/am_role.vue`)),
        ark: defineAsyncComponent(() => import(`./comp/tj_ark.vue`)),
        mrk: defineAsyncComponent(() => import(`./comp/tj_mrk.vue`)),
        grk: defineAsyncComponent(() => import(`./comp/tj_grk.vue`)),
        guide,
      },
      tablist: [
        { title: "角色管理", name: "role" },
        { title: "首领管理", name: "boss" },
        { title: "公会管理", name: "guild" },
        { title: "作业管理", name: "zy" },
        { title: "RinBot指令管理", name: "rbcmd" },
      ],
    };
    const val = reactive({
      season_list: [],
      season_click: null,
      comp_loading: false,
    });
    onMounted(async () => {
      val.comp_loading = true;
    });
    return { cfg, ct, val };
  },
};
</script>
